<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>M3U8在线播放 - 直播源 - M3U8播放器！</title>
	<meta name="description" itemprop="description" content="M3U8解析 M3U8在线转化 M3U8在线合成 直播源在线播放 M3U8直播源在线播放器" />
	<meta name="keywords" itemprop="keywords" content="M3U8在线播放,直播源在线播放，M3U8直播源在线播放器,M3U8在线播放器" />
	<!--video-->
	<link href="https://cdn.bootcss.com/video.js/7.7.5/video-js.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/video.js/7.7.5/video.min.js"></script>
	<!-- ZUI 标准版压缩后的 CSS 文件 -->
	<link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/css/zui.min.css" />
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/zui/1.9.2/css/zui-theme.min.css" />
	<!-- ZUI Javascript 依赖 jQuery -->
	<script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
	<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
	<script src="//cdn.bootcss.com/zui/1.9.1/js/zui.min.js"></script>
	<style>
		@media (min-width: 768px) {
			.col-md-6 {
				width: 61%;
			}
		}
		
		@media (max-width: 767px) {
			.col-md-6 {
				width: 95%;
			}
		}
		
		@media (min-width: 768px) {
			#video-box {
				width: 60%;
			}
		}
		
		@media (max-width: 767px) {
			#video-box {
				width: 90%;
			}
		}
		
		@media (min-width: 768px) {
			.collapselishi {
				width: 60%;
			}
		}
		
		@media (max-width: 767px) {
			.collapselishi {
				width: 90%;
			}
		}
		
		@media (min-width: 768px) {
			.small {
				width: 60%;
			}
		}
		
		@media (max-width: 767px) {
			.small {
				width: 90%;
			}
		}
		
		#video-box,
		.col-md-6,
		.collapselishi,
		.small {
			float: none;
			padding-top: 10px;
			margin-left: auto;
			margin-right: auto;
		}
		
		.navbar {
			min-height: 60px;
			margin-bottom: 20px;
			border: 1px solid transparent;
		}
		
		.container-fluid {
			padding-top: 10px;
		}
		
		.bg-primary {
			border: 1px solid #ddd;
			border-radius: 0.3rem;
		}
		
		.input-control.has-icon-left>.form-control {
			padding-left: 5px;
		}
		
		.bofanglishilibiao {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding-top: 10px;
		}
        p.tips {
            color:red;
        }
	</style>
	<script type="text/javascript">
		var hisItem;
			
function Test(obj) {
    var val = $(obj).val();
    $("#video-box video").prop("src",val);
    $("#video-box").show();
    $("#video-box video").play()
}
    function test(obj) {
        var url = $(obj).val();
        if(!url) {
					alert("请输入m3u8链接");
					return false;
				}
        videojs.options.flash.swf = "js/video-js.swf";
        var myPlayer = videojs("example_video_1");
        myPlayer.src(url);
        myPlayer.load(url);
       // $.zui.store.set('name', url);   
      // console.log($.zui.store.get('name')); 
    
    }
    function testid(obj) {
    var val = hisItem[obj];
    $("#video-box video").prop("src",val);
    $("#video-box").show();
    $("#video-box video").play()
}
    function testid(obj) {
   
    	//	alert(hisItem[obj]);
    	
        var url = hisItem[obj];
        if(!url) {
					alert("请输入m3u8链接");
					return false;
				}
        videojs.options.flash.swf = "js/video-js.swf";
        var myPlayer = videojs("example_video_1");
        myPlayer.src(url);
        myPlayer.load(url);
       // $.zui.store.set('name', url);   
      // console.log($.zui.store.get('name')); 
    
    }
	</script>
	<script>
		(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
	</script>
	<div style="display:none;">
		<script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1278685134&web_id=1278685134"></script>
	</div>

</head>

<body>
	<nav class="navbar navbar-inverse" role="navigation">
		<div class="container-fluid">
			<!-- 导航头部 -->
			<div class="navbar-header">
				<!-- 移动设备上的导航切换按钮 -->
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
				<!-- 品牌名称或logo -->
				<a class="navbar-brand" href="//liangjintang.gitee.io/video-player/">M3U8在线播放</a>
			</div>

			<!-- 导航项目 -->
			<div class="collapse navbar-collapse navbar-collapse-example">
				<!-- 一般导航项目 -->
				<ul class="nav navbar-nav">
					<li class="">
						<a href="http://liangjintang.gitee.io/video-player/">M3U8在线播放(http)</a>
					</li>
					<li>
						<a href="https://liangjintang.gitee.io/video-player/">M3U8在线播放(https)</a>
					</li>
					<!-- 导航中的下拉菜单 -->
				</ul>
			</div>
			<!-- END .navbar-collapse -->
		</div>
	</nav>
	<div class="col-md-6">
		<div class="input-group">
			<div class="input-control search-box has-icon-left has-icon-right search-example" id="searchboxExample">
				<input id="inputSearchExample3" type="search" class="form-control search-input empty focus" placeholder="网络视频地址" autocomplete="off"
				/>
			</div>
			<span class="input-group-btn"> <button id="search_but" onclick="test('#inputSearchExample3')" class="btn btn-primary" type="button">播放</button> </span>
		</div>
	</div>
	<div id="video-box">
		<video width="960" height="400" id="example_video_1" class="video-js  vjs-big-play-centered vjs-fluid " controls="ture" preload="auto"
			data-setup="{}">
			<source src="//liangjintang.gitee.io/video-player/index.png" type="application/x-mpegURL"></source>
			</video>
	</div>
	<div class="collapselishi">
		<div>
			<button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#collapseExample">播放历史</button>
			<a id="history" data-toggle="collapse" class="btn btn-link">删除播放历史</a>
		</div>
		<div class="collapse delete" id="collapseExample">
		</div>
	</div>
	<div class="small">
        <p class="tips"><strong>为了避免跨域，http、https视频源请切换到相应的播放器。</strong></p>
		<p><strong>M3U8视频格式</strong>也是一种M3U，是某些移动设备例如安卓，苹果手机浏览器缓存视频的“专用视频格式”。只是它的编码格式是UTF-8格式。M3U用Latin-1字符集编码。M3U8格式特点是带有一个目录信息或文件，而许多安卓手机或者iPhone手机浏览器缓存的电影格式都为M3U8，需要进行转码才可以播放。<br
			/><br /><strong>M3U8文件</strong>是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件，打开它时播放软件并不是播放它，而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。而M3U8有啥好处呢？主要是可以做多码率的适配，根据网络带宽，客户端会自动选择一个适合自己码率的文件进行播放，保证视频流的流畅。</p>
	</div>
	<script>
		/*搜索记录相关*/
			//从localStorage获取搜索时间的数组
			var hisTime;
			//从localStorage获取搜索内容的数组
			var hisItem;
			//从localStorage获取最早的1个搜索时间
			var firstKey;
			function init() {
				//每次执行都把2个数组置空
				hisTime = [];
				hisItem = [];
				//模拟localStorage本来有的记录
				//localStorage.setItem("a",12333);
				//本函数内的两个for循环用到的变量
				var i = 0
				for(; i < localStorage.length; i++) {
					if(!isNaN(localStorage.key(i))) {
						hisItem.push(localStorage.getItem(localStorage.key(i)));
						hisTime.push(localStorage.key(i));
					}
				}
				i = 0;
				//执行init(),每次清空之前添加的节点
				$(".delete").html("");
				for(; i < hisItem.length; i++) {
					
					//alert(hisItem);
				$(".delete").prepend(' <div class="bg-primary with-padding" onclick="testid('+ i+')" id="' + hisItem[i]+ '"> <p class="bofanglishilibiao">' + hisItem[i] + '</p></div>')
				}
				
			}
			init();
			$("#search_but").click(function() {
				var value = $("#inputSearchExample3").val();
				var time = (new Date()).getTime();

				if(!value) {
				
					return false;
				}

				//输入的内容localStorage有记录
				if($.inArray(value, hisItem) >= 0) {
					for(var j = 0; j < localStorage.length; j++) {
						if(value == localStorage.getItem(localStorage.key(j))) {
							localStorage.removeItem(localStorage.key(j));
						}
					}
					localStorage.setItem(time, value);
				}
				//输入的内容localStorage没有记录
				else {
					//由于限制了只能有6条记录，所以这里进行判断
					if(hisItem.length > 10) {
						firstKey = hisTime[0]
						localStorage.removeItem(firstKey);
						localStorage.setItem(time, value);
					} else {
						localStorage.setItem(time, value)
					}
				}
				init();
				//正式的时候要提交的！！！
				//$("#form1").submit()

			});

			//清除记录功能
			$("#history").click(function() {
				var f = 0;
				for(; f < hisTime.length; f++) {
					localStorage.removeItem(hisTime[f]);
				}
				init();
			});
            $('#inputSearchExample3').keydown(function(e){
                    if(e.keyCode==13){
                        $('#search_but').trigger("click");
                    }
                });
	</script>


</body>

</html>